<template>
    <el-container direction='vertical'>
        <AppHeader/>
        <el-container id="mainContainer" class="mainContainer">
            <Sidebar/>
            <el-main>
                <Breadcrumb :list='list'/>
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-dialog title="修改初始密码" :visible.sync="dialogFormVisible" width="40%" :show-close='false' :close-on-press-escape='false' :close-on-click-modal="false">
            <p class="changeTip">欢迎您使用使用圣旦云平台</P>
            <p class="changeTip">为确保您的账户安全请设置您的登陆密码</P>
            <el-form :model="form"  :rules='registerRules' ref="form">
                <el-form-item label="当前账号" :label-width='"100px"'>
                    <el-input v-model="form.phone" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item prop='password' label="密  码" :label-width='"100px"'>
                    <el-input type="password" v-model="form.password" prefix-icon="el-icon-edit" onpaste="return false" oncontextmenu="return false" maxlength='20' oncopy="return false" oncut="return false" clearable></el-input>
                </el-form-item>
                <el-form-item prop='password2' label="确认密码" :label-width='"100px"'>
                    <el-input type="password" v-model="form.password2" prefix-icon="el-icon-edit" onpaste="return false" oncontextmenu="return false" maxlength='20' oncopy="return false" oncut="return false" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changePassword('form')">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>
<script>
import Cookies from 'js-cookie'
import AppHeader from '../components/Header'
import Sidebar from '../components/Sidebar'
import Breadcrumb from '../components/Breadcrumb'
import { mapState } from 'vuex'
import util from "@/util";
import { forcePasswordChange } from '@/api'
import md5 from "js-md5";
export default {
    data(){
        const checkPassword = (rule, value, callback) => {
            if (util.validChinese(value)) {
                return callback(new Error("密码不能包含中文"));
            } else if (util.validEmpty(value)) {
                return callback(new Error("密码不能包含空格！"));
            } else {
                callback();
            }
        };
        const checkPassword2 = (rule, value, callback) => {
            if (util.validChinese(value)) {
                return callback(new Error("密码不能包含中文"));
            } else if (util.validEmpty(value)) {
                return callback(new Error("密码不能包含空格！"));
            } else if (value != this.form.password) {
                return callback(new Error("两次密码输入不一致"));
            } else {
                callback();
            }
        };
        return {
            dialogFormVisible: false,
            form: {
                phone: '',
                password: '',
                password2: ''
            },
            registerRules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { validator: checkPassword, trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                ],
                password2: [
                    { required: true, message: "请再次输入密码", trigger: "blur" },
                    { validator: checkPassword2, trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                ]
            },
        }
    },
    components: {
        AppHeader,
        Sidebar,
        Breadcrumb
    },
    computed: {
        list () {
            return this.$route.matched
        },
        ...mapState({
            mobile: state => state.mobile,
        })
    },
    mounted(){
        this.form.phone = this.mobile
        if (Cookies.get(process.env.COOKIE_NAME + '_isFirstLogin') == 'true') {
            this.dialogFormVisible = true
        }
        document.getElementById('mainContainer').style.height = document.documentElement.clientHeight - document.querySelector('.el-header').clientHeight + 'px'
        window.onresize = () => {
            document.getElementById("app").style.height = document.documentElement.clientHeight + "px";
            document.getElementById('mainContainer').style.height = document.documentElement.clientHeight - document.querySelector('.el-header').clientHeight + 'px'
        };
    },
    methods:{
        changePassword(formName){
            var self = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    forcePasswordChange({
                        mobile: self.form.phone,
                        password: md5(self.form.password)
                    }).then(res => {
                        Cookies.set(process.env.COOKIE_NAME + "_isFirstLogin", 'false');
                        self.$message({
                            message: '密码修改成功!',
                            type: 'success'
                        });
                        self.dialogFormVisible = false
                    })
                }
            });
        }
    }
}
</script>
<style lang="less" scoped>
.el-main {
    position: relative;
    width: 100%;
    background-color: #f8f8f8;
    padding-top: 0;
    padding-right: 0;
    padding-left: 11px;
    padding-bottom: 0;
}
.el-main::-webkit-scrollbar {
    display:none;
}
.el-container{
    height: 100%;
}
.changeTip{
    margin-left: 30px;
    margin-bottom: 10px;
    font-size: 14px;
}

</style>
